import Link from "next/link";
import ResponsiveLayout from "@/components/ResponsiveLayout";
import Footer from '@/components/Footer';
import { webAPI } from '@/lib/api';
import type { Article, Case } from '@/lib/api';
import ArticleList from "@/components/ArticleList";
import CaseList from "@/components/CaseList";
import ContactUs from "@/components/ContactUs";
import RecommendedProducts from "@/components/RecommendedProducts";
import Banner from "@/components/Banner";
import WeChatShareProvider from "@/components/WeChatShareProvider";
export const dynamic = 'force-dynamic'


export default async function Home() {
  // 获取推荐文章
  const recommendRes = await webAPI.getRecommendArticles(5);
  const recommendArticles: Article[] = recommendRes.success ? recommendRes.data : [];

  // 获取推荐攻略
  const recommendCasesRes = await webAPI.getRecommendCases(5);
  const recommendCases: Case[] = recommendCasesRes.success ? recommendCasesRes.data : [];

  

  return (
    <ResponsiveLayout active="home">
      <WeChatShareProvider 
        title="AI产品之家 - 做好AI产品，学好AI产品，用好AI产品"
        description="一个聚焦AI产品的社区，探索智能的无限可能。"
        imageUrl="/logo.png"
      />

      {/* Banner */}
      <Banner 
        pcImage="/banner/home_banner_pc.png"
        mobileImage="/banner/home_banner_mb.png"
        alt="AI产品之家 - 做好AI产品、用好AI产品"
      />

      {/* Main Content */}
      <div className="container mx-auto max-w-6xl px-4 pb-8 pt-4">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* 左侧：有趣的发现 */}
          <div className="lg:col-span-2">
            <div className="bg-white rounded-xl shadow-md">
              <div className="flex items-center justify-between p-6 border-b border-gray-100">
                <h2 className="text-2xl font-bold text-slate-800">发现</h2>
                <Link href="/discover" className="text-blue-600 hover:text-blue-700 font-medium" style={{fontSize: '16px'}}>
                  查看更多 →
                </Link>
              </div>
              {recommendArticles.length > 0 ? (
                <ArticleList articles={recommendArticles} />
              ) : (
                <div className="text-center p-6 py-8">
                  <p className="text-slate-500">暂无推荐文章</p>
                </div>
              )}
            </div>

            {/* 左侧：实用的攻略 */}
            <div className="bg-white rounded-xl shadow-md mt-8">
              <div className="flex items-center justify-between p-6 border-b border-gray-100">
                <h2 className="text-2xl font-bold text-slate-800">攻略</h2>
                <Link href="/cases" className="text-blue-600 hover:text-blue-700 font-medium" style={{fontSize: '16px'}}>
                  查看更多 →
                </Link>
              </div>
              {recommendCases.length > 0 ? (
                <div className="p-2">
                  <CaseList cases={recommendCases} />
                </div>
              ) : (
                <div className="text-center p-6 py-8">
                  <p className="text-slate-500">暂无攻略</p>
                </div>
              )}
            </div>
          </div>

          {/* 右侧：好用的产品 */}
          <div className="lg:col-span-1 space-y-6">
            <RecommendedProducts pageSize={10} title="产品" />

            {/* 联系我们 */}
            <ContactUs />
          </div>
        </div>
      </div>

      {/* Footer */}
      <Footer />
    </ResponsiveLayout>
  );
}